<template>
	<view>
		<view class="ipt-box">
			<input @click="goSearch" class="ipt" type="text">
		</view>
		<view class="swiper-box">
			<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" circular>
				<swiper-item v-for="item,index in banner" :key="index">
					<image :src="item.pic"></image>
				</swiper-item>
			</swiper>
		</view>
		<view class="menu-box">
			<view @click="goMenu(item)" class="menu-item" v-for="item,index in menu_data" :key="index">
				<u-icon :name="item.icon" size="30" style="display: block;width: 60rpx;height: 60rpx;margin: auto;">
				</u-icon>
				<view>{{item.title}}</view>
			</view>
		</view>
		<view class="recommend-box">
			<view class="box-title">
				推荐歌单<b style="color: #828282;font-weight: 700;">></b>
			</view>
			<view class="rcmd-box">
				<view @click="goPlaylist(item.id)" class="rcmd-item" v-for="item in rcmd_data" :key="item.id">
					<image :src="item.picUrl"></image>
					<view>{{item.name}}</view>
					<span>{{formatCount(item.playCount)}}</span>
				</view>
			</view>
		</view>
		<view class="toplist-box">
			<view @click="goRank" class="box-title">
				排行榜<b style="color: #828282;font-weight: 700;">></b>
			</view>
			<swiper class="tpl-box" :indicator-dots="false" :autoplay="true" :interval="3000" :duration="1000" circular>
				<swiper-item @click="goPlaylist(item.id)" class="tpl-item" v-for="item in top_data" :key="item.id">
					<view class="tpl-title">
						{{item.name}}<b style="color: #828282;font-weight: 700;">></b>
					</view>
					<view class="tpl-detail" :style="{width:top_width + 'px'}">
						<view class="tpl-song" v-for="i,k in item.my_tracks" :key="k">
							<image :src="i.al.picUrl"></image>
							<b>{{k+1}}</b>
							<view class="song-box">
								<view>{{i.name}}</view>
								<span>{{i.my_ar}}</span>
							</view>
						</view>
					</view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script src="./find.js"></script>

<style lang="scss" scoped>
	@import "@/pages/find/find.scss";
</style>